<template>
	<view class="page">
		<view class="wrapper" v-for='item in list' key='item.id'>
			<!-- 左侧box -->
			<view class="content">
				<view class="couponCount">{{item.size}}张</view>
				<view class="oilline linwidth160 lineBt"></view>
				<view>
					<text class="moyfh">¥</text>
					<text class="moneyNum">{{item.price}}</text>
				</view>
				<view class="oilline  linwidth160 lineBt"></view>
			</view>

			<view class="split-line"></view>
			<!-- 右侧box -->
			<view class="tip">
				<view class="oilline linwidth227 lineBt "></view>
				<view class="vnameBx">
					<view class="couponmaes">{{item.itemName}}</view>
					<view class="couponmaes">满{{ item.activityPrice}}减{{item.price}}元</view>
				</view>
				<view class="oilline linwidth227 lineBt"></view>
				<view class="btnbx" :class="item.isJoin==200?'':'moveCm'">
					<view class="btnw" :class="item.isJoin==200?'btnBgGray':'btnBgActive'">
						<view class="btnn">{{btnTxt}}</view>
					</view>
				</view>
			</view>
		</view>
		<soure :url="url"></soure>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'https://www.jianshu.com/p/9cd49a8b1571',
				list: [{
					id: "2c91e88272084d710172112415350021",
					itemId: "7",
					itemName: "10元泡面优惠券",
					denomination: 0,
					originPrice: 0,
					price: 10,
					activityPrice: 100,
					description: "",
					size: 5,
					isJoin: "201"
				}, {
					id: "2c91e88272084d710172112415350024",
					itemId: "8",
					itemName: "30元鸡蛋优惠券",
					denomination: 0,
					originPrice: 0,
					price: 10,
					activityPrice: 200,
					description: "",
					size: 3,
					isJoin: "200"
				}],
				isJoin: "200",
				btnTxt: "领取成功"
			}
		},
		methods: {},

	}
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		padding-top: 59rpx;
		padding-bottom: 38rpx;
		box-sizing: border-box;
		position: relative;
		background: #000;
	}


	.wrapper {
		width: 670rpx;
		height: 226rpx;
		margin: 0 auto;
		display: flex;
		background: linear-gradient(135deg, rgba(219, 93, 115, 1) 0%, rgba(137, 29, 34, 1) 100%);
		border-radius: 20rpx;
		margin-bottom: 28rpx;
	}

	/*前半部分样式*/
	.content {
		position: relative;
		height: 229rpx;
		flex: 0 0 200rpx;
		text-align: center;
		overflow: hidden;
		border-top-left-radius: 18rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	/*后半部分样式*/
	.tip {
		position: relative;
		flex: 1;
		height: 229rpx;
		box-sizing: border-box;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/*中间竖直虚线样式*/
	.split-line {
		position: relative;
		flex: 0 0 0;
		margin: 0 10rpx 0 6rpx;
		border-left: 2rpx dashed #fff;
	}

	/*给虚线加两个伪类，基本样式如下*/
	.split-line:before,
	.split-line:after {
		content: '';
		position: absolute;
		width: 32rpx;
		height: 16rpx;
		background: #000;
		left: -18rpx;
		z-index: 1;
	}

	/*几个伪类化成的圆弧的样式以及位置（置于顶部）我把它放在一起了*/
	.content:before,
	.tip:before,
	.split-line:before {
		border-radius: 0 0 16rpx 16rpx;
		top: 0;
	}

	/*几个伪类化成的圆弧的样式以及位置（置于底部）我把它放在一起了*/
	.content:after,
	.tip:after,
	.split-line:after {
		border-radius: 16rpx 16rpx 0 0;
		bottom: 0;
	}


	.couponCount {
		width: 150rpx;
		height: 150rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(140, 31, 37, 1);
		transform: rotate(-45deg);
		position: absolute;
		text-align: center;
		line-height: 259rpx;
		top: -78rpx;
		left: -78rpx;
		background: linear-gradient(319deg, rgba(244, 219, 160, 1) 0%, rgba(255, 255, 255, 1) 100%);
	}

	.oilline {
		background: linear-gradient(to right,
				rgba(0, 0, 0, 0) 0%,
				rgba(0, 0, 0, 0) 10%,
				rgba(255, 255, 255, 0.3) 20%,
				rgba(255, 255, 255, 0.4) 30%,
				rgba(255, 255, 255, 0.5) 40%,
				rgba(255, 255, 255, 0.8) 50%,
				rgba(255, 255, 255, 0.5) 60%,
				rgba(255, 255, 255, 0.4) 70%,
				rgba(255, 255, 255, 0.3) 80%,
				rgba(0, 0, 0, 0) 90%,
				rgba(0, 0, 0, 0) 100%);
		height: 2rpx;
	}

	.linwidth227 {
		width: 227rpx;
	}

	.linwidth160 {
		width: 160rpx;
	}

	.moyfh {
		font-size: 69rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
		margin-right: -2rpx;
	}

	.moneyNum {
		font-size: 96rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
	}

	.couponmaes {
		font-size: 30rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
		width: 260rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.vnameBx {
		text-align: center;
		width: 227rpx;
		margin: 25rpx 0;
	}

	.btnbx {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btnw {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 148rpx;
		height: 148rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.btnBgActive {
		color: rgba(140, 31, 37, 1);
		box-shadow: 0px 2px 29px 0px rgba(77, 12, 15, 0.56);
		background: linear-gradient(319deg, rgba(244, 219, 160, 1) 0%, rgba(255, 255, 255, 1) 100%);
	}

	.btnBgGray {
		box-shadow: 0px 2px 29px 0px rgba(77, 12, 15, 0.56);
		background: #999;
		color: #fff;
	}

	.btnn {
		font-size: 30rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 1rpx solid rgba(142, 33, 39, 1);
		text-align: center;
		box-sizing: border-box;
		padding: 18rpx;
		line-height: 46rpx;
	}

	.moveCm {
		animation: scale 0.8s ease-in-out infinite alternate;
	}

	@keyframes scale {
		0% {
			transform: scale(0.92);
		}

		100% {
			transform: scale(1);
		}
	}
</style>
